<template>
  <div class="opinion">
    <header>
      <van-icon name="arrow-left" @click="handleBack()" size="25"/>
      <span>意见反馈</span>
    </header>
    <div class="content">
        <van-field
        v-model="result"
        is-link
        readonly
        label="选择反馈类型"
        @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
        />
        </van-popup>

        <van-field v-model="value"  placeholder="请输入反馈信息" class="text" show-word-limit maxlength="300" type="textarea" :autosize= "{minHeight: 130 }"/>
        <van-field v-model="value"  placeholder="手机/qq/邮箱选填" class="text" />
        <van-uploader v-model="fileList" multiple class="upload" preview-size="100"/>
    </div>
    <span class="sub">提交</span>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'opinion',
  setup() {
    const columns = ['产品体验', '产品功能', '其他问题'];
    const result = ref('');
    const showPicker = ref(false);
    const value = ref('');

    const onConfirm = (value) => {
      result.value = value;
      showPicker.value = false;
    };
    const fileList = ref();

    return {
      result,
      columns,
      onConfirm,
      showPicker,
      value,
      fileList ,
    };
  },
  methods: {
      handleBack() {
        this.$router.back()
      },
    },
}
</script>

<style lang="less" scoped>
  header{
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px;
  }
  .content{
    background-color: rgba(242, 242, 242, 1);
    padding: 20px;
    height: 505px;
  }

  .content .text{
    margin-top: 20px;
  }
  .content .upload{
    margin-top: 20px;
    margin-right: 20px;
  }

  .sub{
    width: 347px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #55a034;
    font-size: 13px;
    color: white;
    display: block;
    border-radius: 22px;
    margin: 10px auto;
  }
</style>
